<template>
  <div>
    <!-- 左侧 -->
    <div class="mb-10">
      最多选择<span style="color: #ff3939;margin:0 3px;">{{count}}</span>项内容
    </div>
    <div class="transfer-container">
      <div class="transfer-panel">
        <p class="transfer-panel__header">可选字段</p>
        <div class="transfer-panel__body">
          <div v-for="item in leftChecked" class="transfer-panel__item" :class="{checked: item.checked}" @click="checkItem(item)">
            <span>{{item.label}}</span>
          </div>
        </div>
      </div>
      <div class="transfer__buttons">
        <ui-button size="mini" @click="addToRight">添加<i class="icon icon-arr-r"></i></ui-button>
        <ui-button size="mini" @click="addToLeft">删除<i class="icon icon-arr-l"></i></ui-button>
      </div>
      <!-- 右侧 -->
      <div class="transfer-panel">
        <p class="transfer-panel__header">已选字段</p>
        <div class="transfer-panel__body">
          <div v-for="item in rightChecked" class="transfer-panel__item" :class="{checked: item.checked}" @click="checkItem(item)">
            <span class="text-nowarp">{{item.label}}</span>
          </div>
        </div>
      </div>
      <div class="transfer__buttons">
        <ui-button size="mini" @click="moveToUp">上移<i class="icon icon-arr-u"></i></ui-button>
        <ui-button size="mini" @click="moveToDown">下移<i class="icon icon-arr-d"></i></ui-button>
        <ui-button size="mini" @click="reset">重置<i class="icon icon-reset"></i></ui-button>
      </div>
    </div>
  </div>
</template>

<script>
  function sortNum(a,b) {//排序方法
    return a.sort - b.sort;
  }
  export default {
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data () {
      return {
        leftChecked: [],
        rightChecked: [],
        count: 8
      }
    },
    created() {
      this.initData(this.data)
    },
    methods: {
      initData(val) {
        let left = [], right = []
        val.forEach(item => {
          if(!item.show) {
            left.push(item)
          } else {
            right.push(item)
          }
        });
        this.leftChecked = left.sort(sortNum)
        this.rightChecked = right.sort(sortNum)
      },
      checkItem(item) {
        item.checked = !item.checked
      },
      addToRight() {
        let j = 1;
        for(let i = 0; i < this.leftChecked.length; i++){
          let item = this.leftChecked[i]
          if(item.checked){
            item.sort = this.rightChecked[this.rightChecked.length];
            this.rightChecked.push(item);
            this.leftChecked.splice(i, 1);
            i --
          } else {
            item.sort = j
          }
        }
      },
      addToLeft() {
        let j = 1;
        for(let i = 0; i < this.rightChecked.length; i ++){
          let item = this.rightChecked[i]
          if(item.checked){
            item.sort = this.leftChecked[this.leftChecked.length];
            this.leftChecked.push(item);
            this.rightChecked.splice(i, 1);
            i --
          } else {
            item.sort = j
          }
        }
      },
      moveToUp() {
        for(let i = 1; i < this.rightChecked.length; i ++){
          if(this.rightChecked[i].checked){
            let t = this.rightChecked[i].sort
            this.rightChecked[i].sort = this.rightChecked[i-1].sort
            this.rightChecked[i-1].sort = t
            this.rightChecked = this.rightChecked.sort(sortNum)
          }
        }
      },
      moveToDown() {
        for(let i = this.rightChecked.length - 2; i >= 0; i --){
          if(this.rightChecked[i].checked){
            let t = this.rightChecked[i+1].sort
            this.rightChecked[i+1].sort = this.rightChecked[i].sort
            this.rightChecked[i].sort = t
            this.rightChecked = this.rightChecked.sort(sortNum)
          }
        }
      },
      reset() {
        const data = [
          {
            name: 'candidate',
            label: '候选人',
            show: true,
            sort: 1 ,
            checked: false
          },
          {
            name: 'status',
            label: '状态',
            show: true,
            sort: 2,
            checked: false
          }, 
          {
            name: 'dynamic',
            label: '动态',
            show: true,
            sort: 3 ,
            checked: false
          }, 
          {
            name: 'mobile',
            label: '联系方式',
            show: true,
            sort: 4,
            checked: false
          }, 
          {
            name: 'contact',
            label: '联系TA',
            show: true,
            sort: 5,
            checked: false
          }, 
          {
            name: 'updataTime',
            label: '更新时间',
            show: true,
            sort: 6 ,
            checked: false
          }, 
          {
            name: 'source' ,
            label: '来源渠道',
            show: true,
            sort: 7,
            checked: false
          }, 
          {
            name: 'lastCompany',
            label: '上家公司',
            show: false,
            sort: 1 ,
            checked: false
          }, 
          {
            name: 'workingLife',
            label: '工作年限',
            show: false,
            sort: 2,
            checked: false
          }, 
          {
            name: 'gender',
            label: '性别',
            show: false,
            sort: 3 ,
            checked: false
          }, 
          {
            name: 'highestEducation',
            label: '最高学历',
            show: false,
            sort: 4 ,
            checked: false
          }, 
          {
            name: 'academy',
            label: '毕业院校',
            show: false,
            sort: 5,
            checked: false
          } 
        ]
        this.$emit('update:data', data)
        this.initData(this.data)
      }
    }
  }
</script>
